<template>
  <div id="container" data-XSwitch>
    <div class="sections">
      <div class="section" id="section0"></div>
      <div class="section" id="section1"></div>
    </div>
  </div>
</template>
<script>
import XSwitch from "../utils/XSwitch";
export default {
  name: "Home",
  data() {
    return {
      // 商品分类
      option0: {
        title: {
          text: "商品分析",
          textStyle: { fontSize: 40 },
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 150,
          top: 50,
          bottom: 50,
          data: [],
        },
        series: [
          {
            name: "种类",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      option1: {
        title: {
          text: "月销量",
          textStyle: { fontSize: 40 },
          left: "center",
        },
        xAxis: {
          type: "category",
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Nov",
            "Dec",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 30, 100, 200, 50, 40],
            type: "bar",
          },
        ],
      },
    };
  },
  methods: {
    // 获取数据
    async getData0() {
      const { data } = await this.$request.get("/category", {
        params: { classLevel: "one" },
      });
      return data;
    },
  },
  computed: {},
  created() {},
  async mounted() {
    //获取节点
    const section0 = document.querySelector("#section0");
    const section1 = document.querySelector("#section1");
    // 基于准备好的节点,初始化echarts实例
    const myChart_0 = this.$echarts.init(section0, "dark");
    const myChart_1 = this.$echarts.init(section1, "dark");
    //监听窗口变化改变视图大小
    window.onresize = function () {
      myChart_0.resize();
      myChart_1.resize();
    };
    // 异步得到数据并设置图表相关数据
    const data_0 = await this.getData0();
    // const data_1 = await this.getData1();
    data_0.data.forEach((item) => {
      this.option0.legend.data.push(item.cat_one_id);
      this.option0.series[0].data.push({
        name: item.cat_one_id,
        value: item["count(cat_one_id)"],
      });
    });
    // 绘制图表
    this.option0 && myChart_0.setOption(this.option0);
    this.option1 && myChart_1.setOption(this.option1);
    // 调用XSwitch
    XSwitch("[data-XSwitch]");
  },
};
</script>
<style lang="scss" scoped>
#container,
.sections,
.section {
  position: relative;
}
#container {
  height: calc(100vh - 60px);
  overflow: hidden;
}
.sections {
  height: calc(100vh - 60px);
  .section {
    height: calc(100vh - 60px);
    z-index: 999;
  }
}
::v-deep .pages {
  position: fixed;
  right: 50px;
  top: 50%;
  list-style: none;
  li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    margin: 15px 0 0 7px;
    cursor: pointer;
  }
  li.active {
    margin-left: 0;
    width: 14px;
    height: 14px;
    border: 4px solid #fff;
    background: none;
  }
}
#section2 {
  background: red;
}
#section3 {
  background: yellow;
}
</style>
